<template>
  <div class="pifajia1">
    <div class="left">
      <a-menu
        mode="inline"
        :open-keys="openKeys"
        style="width: 200px"
        @openChange="onOpenChange"
      >
        <a-sub-menu key="sub1" >
          <span slot="title"><a-icon type="search" /><span>算例</span></span>
          <a-menu-item key="1" @click="menuCheck = 1"> NIM游戏 </a-menu-item>
          <a-menu-item key="2" @click="menuCheck = 2">
            关键字搜索拍卖
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
    <div class="right" v-if="menuCheck === 1">
      <div class="description">
        <h3>问题描述:</h3>
        <p>
          每一次操作Alice和Bob可以从任意一堆石子中取出任意数量的石子，至少取一颗，至多取出这一堆剩下的所有石子。
        </p>
        <p>两个人轮流行动，取走最后一个的人胜利。</p>
        <p>Alice为先手。</p>
      </div>
      <div class="parameter">
        <h3>输入:</h3>
        <div class="pictures"></div>
        <div class="dataNum">
          <span>x<sub>1</sub>= <a-input v-model="x1" /></span>
          <span>x<sub>2</sub>= <a-input v-model="x2" /></span>
          <span>x<sub>3</sub>= <a-input v-model="x3" /></span>
        </div>
      </div>
      <div class="functions">
        <h3>关键函数：</h3>
      </div>
      <div class="compute">
        <div class="button">
          <a-button type="primary" @click="compute"> 计算 </a-button>
        </div>
      </div>
      <div class="result">
        <a-card
          style="width: 480px"
          v-for="(item, index) in picArr"
          :key="index"
        >
          <img slot="cover" alt="example" :src="item" />
          <a-card-meta title="π-q"> </a-card-meta>
        </a-card>
        <a-card style="width: 480px">winner:{{ res1.winner }}</a-card>
      </div>
    </div>
    <div class="right" v-else>
      <div class="description">
        <h3>问题描述:</h3>
        <p>
          参考课件，在得知所有广告位点击率和每个竞拍者上报价格的情况下，求出分配向量和支付向量。
        </p>
      </div>
      <div class="parameter">
        <h3>输入:</h3>
        <div class="pictures"></div>
        <div class="dataNum">
          <span>𝛼<sub>1</sub>= <a-input v-model="𝛼1" /></span>
          <span>𝛼<sub>2</sub>= <a-input v-model="𝛼2" /></span>
          <span>b<sub>1</sub>= <a-input v-model="b1" /></span>
          <span>b<sub>2</sub>= <a-input v-model="b2" /></span>
          <span>b<sub>3</sub>= <a-input v-model="b3" /></span>
        </div>
      </div>
      <div class="functions">
        <h3>关键函数：</h3>
      </div>
      <div class="compute">
        <div class="button">
          <a-button type="primary" @click="compute2"> 计算 </a-button>
        </div>
      </div>
      <div class="result">
        <a-card style="width: 480px" v-show="res2.x1 > -1">
          <p>
            <span style="margin-right: 30px">x<sub>1</sub>:{{ res2.x1 }}</span>
            <span style="margin-right: 30px">x<sub>2</sub>:{{ res2.x2 }}</span>
            <span style="margin-right: 30px">x<sub>3</sub>:{{ res2.x3 }}</span>
            <span style="margin-right: 30px">p<sub>1</sub>:{{ res2.p1 }}</span>
            <span style="margin-right: 30px">p<sub>2</sub>:{{ res2.p2 }}</span>
            <span style="margin-right: 30px">p<sub>3</sub>:{{ res2.p3 }}</span>
          </p>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rootSubmenuKeys: ["sub1", "sub2", "sub4"],
      openKeys: ["sub1"],
      x1: 0,
      x2: 0,
      x3: 0,
      𝛼1: 0,
      𝛼2: 0,
      b1: 0,
      b2: 0,
      b3: 0,
      picArr: [],
      menuCheck: 1,
      res1: "",
      res2: {},
    };
  },
  mounted() {
    this.x1 = this.$store.state.ExampleData[0].params[0].default_value;
    this.x2 = this.$store.state.ExampleData[0].params[1].default_value;
    this.x3 = this.$store.state.ExampleData[0].params[2].default_value;
    this.𝛼1 = this.$store.state.ExampleData[1].params[0].default_value;
    this.𝛼2 = this.$store.state.ExampleData[1].params[1].default_value;
    this.b1 = this.$store.state.ExampleData[1].params[2].default_value;
    this.b2 = this.$store.state.ExampleData[1].params[3].default_value;
    this.b3 = this.$store.state.ExampleData[1].params[4].default_value;
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    compute() {
      this.axios
        .post("/course/calc_example/", {
          example_key: this.$store.state.ExampleKey,
          param: {
            x1: this.x1,
            x2: this.x2,
            x3: this.x3,
          },
        })
        .then((res) => {
          this.res1 = res;
          //   this.picArr = res.urls.map(
          //     (item) => "http://10.210.37.15:8080/" + item
          //   );
        });
    },
    compute2() {
      this.axios
        .post("/course/calc_example/", {
          example_key: this.$store.state.ExampleData[1].key,
          param: {
            alpha1: this.𝛼1,
            alpha2: this.𝛼2,
            b1: this.b1,
            b2: this.b2,
            b3: this.b3,
          },
        })
        .then((res) => {
          this.res2 = res;
        });
    },
  },
};
</script>

<style lang="scss">
.pifajia1 {
  display: flex;
  .right {
    // background-color: skyblue;
    flex: 1;
    .description {
      padding: 0px 20px 0 20px;
      span {
        display: block;
        margin-bottom: 10px;
      }
    }
    .parameter {
      padding: 0 20px 20px 20px;
      span {
        display: inline-block;
        margin-bottom: 10px;
      }
      .pictures {
        margin-bottom: 10px;
      }
      .dataNum {
        display: flex;
        justify-content: space-between;
      }
      .ant-input {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-variant: tabular-nums;
        list-style: none;
        font-feature-settings: "tnum";
        position: relative;
        display: inline-block;
        width: 80px;
        height: 32px;
        padding: 4px 11px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 1.5;
        background-color: #fff;
        background-image: none;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        transition: all 0.3s;
      }
    }
    .functions {
      padding: 0 20px 20px 20px;
    }
    .compute {
      padding-right: 20px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      border-bottom: 1px solid #ccc;
      .button {
        margin-bottom: 10px;
      }
    }
    .result {
      margin-top: 20px;
      .ant-card-meta-title {
        overflow: hidden;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        font-size: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
      }
    }
  }
}
</style>